<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2018/12/4</title>
    <script src="node_modules/_vue@2.5.17@vue/dist/vue.js"></script>
    <script src="node_modules/Mock/dist/mock-min.js"></script>
    <!--好的代码像粥一样,是得用时间和精力熬的。-->
</head>
<body>
<div id="root">
    <h1 v-for="(item,key) in userData" v-on:click="clickToDel(key)">{{item.name}}--{{item.gender|toGender}}--{{item.age}}</h1>
</div>
<script>
    /*
  * v-for       循环数组
  * v-on        绑定事件
  * v-if        显示隐藏元素
  * v-else      显示隐藏元素
  * v-else-if   显示隐藏元素
  * v-bind      显示隐藏元素
  * v-show      显示隐藏元素
  * v-html      绑定html
  * v-text      绑定文本
  * v-pre       跳过编译
  * v-model     双向数据绑定
  * v-cloak     防止页面闪烁
  * v-once      一次性绑定
  * */
    //过滤器 对原始数据进行处理
    //定义过滤器
    Vue.filter('toGender',function(value){
        return value ? '男':'女';
    });
    let app = new Vue({
        el:'#root',
        data:{
            userData:Mock.mock({
                'data|10':[{
                    name:'@cname',
                    gender:'@boolean',
                    city:'@city',
                    phoneNumber:/^1[345789]\d{9}$/,
                    age: '@integer(16,30)'
                }]}).data
        },
        methods:{}
    })


</script>

</body>
</html>
